import { WebGLRenderer, PerspectiveCamera, Scene, PlaneGeometry, MeshBasicMaterial, Mesh, AxesHelper } from 'three'
import { GUI } from 'three/examples/js/libs/dat.gui.min'
const renderer = new WebGLRenderer()
const scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)

const planeGeometry = new PlaneGeometry()
const planeMaterial = new MeshBasicMaterial({ color: 0xcccccc })
const plane = new Mesh(planeGeometry, planeMaterial)

const axes = new AxesHelper(30)

scene.add(plane)
scene.add(axes)

renderer.setClearColor(0xffffff)
renderer.setSize(window.innerWidth, window.innerHeight)

camera.lookAt(scene.position)



const controls = new function() {
  this.x = -10
  this.y = 10
  this.z = 50
}
const gui = new GUI()

const cameraGui = gui.addFolder('camera')
cameraGui.add(controls, 'x', -100, 1000)
cameraGui.add(controls, 'y', -100, 1000)
cameraGui.add(controls, 'z', -100, 1000)
cameraGui.open()

document.body.appendChild(renderer.domElement)

function render() {
  requestAnimationFrame(render)
  camera.position.set(controls.x, controls.y, controls.z)
  renderer.render(scene, camera)
}

render()

